<!--
 * @Descripttion:
 * @version:
 * @Date: 2021-04-20 11:06:21
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-09-24 18:18:43
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
-->
<template>
    <el-card class="important-notices">
        <template #header>
            重要通知
        </template>
        <el-row :gutter="20">
            <el-col :span="14">
                <el-timeline style="max-width: 600px">
                    <el-timeline-item v-for="notice in importantNotices" :key="notice.id" :timestamp="notice.createTime"
                                      placement="top">
                        <el-card>
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <strong style="font-size: 14px">{{ notice.title }} :</strong>
                                </el-col>
                                <el-col :span="16">
                                    {{ notice.text }}
                                </el-col>
                                <el-col :span="20" align="right" style="font-size: small;color: #636565">
                                    发布人： {{ notice.sysName }}
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
                <el-button type="info" v-if="canLoadMore" @click="loadMore">加载更多 >>></el-button>
            </el-col>
            <el-col :span="4">
                <yuan/>
            </el-col>
        </el-row>
    </el-card>
    <el-card class="grade-charts">
        <template #header>
            成绩统计图表
        </template>
        <!-- 成绩统计图表组件 -->
        <grade-charts/>
    </el-card>
    <el-card class="help-support">
        <template #header>
            帮助与支持
        </template>
        <p class="support-content">需要帮助？联系管理员：2177597360@qq.com</p>
    </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {GetAllNotice} from "@/api/announcement";
import GradeCharts from '@/components/Grade/GradeCharts.vue';
import Yuan from "@/components/Grade/Yuan.vue";

const importantNotices = ref([]);
const hasMore = ref(true);
const page = ref(1);
const pageSize = ref(10);
const canLoadMore = ref(false);


async function loadMore() {
    if (!hasMore.value) return;
    page.value++;
    await findAllNotice()
}

onMounted(async () => {
    await findAllNotice()
    if (importantNotices.value.length >= pageSize.value) {
        canLoadMore.value = true;
    }
})

async function findAllNotice() {
    const {data} = await GetAllNotice(page.value, pageSize.value);
    importantNotices.value.push(...data.list);
}
</script>

<style scoped>
/* 这里放置样式 */
</style>
